﻿

function add_pic_btn_click_stuff() {
    $('#upload_target').slideDown(200);
    $('#informer').text("").hide();
}

//function init() {
//    document.getElementById('file_upload_form').onsubmit = function () {
//        document.getElementById('file_upload_form').target = 'upload_target';
//        //When the form is submitted the feedback will bereceived by the ifram!
//    }
//}
function imageButtonClick(e, data) {
    var editor = data.editor;

    $("#dialog_uploadImage").dialog('open');

    editor.focus();
    // e.preventDefault();
    return false;
}
//window.onload = init;

jQuery(document).ready(function () {

    var uploadWin = ' <div style="display: none" id="dialog_uploadImage">';
    uploadWin = uploadWin + '<form id="file_upload_form" name="uploadImageForm" action="/home/image" method="post" enctype="multipart/form-data">';
    uploadWin = uploadWin + '<input name="file_upload" type="file" id="file_upload_input" style="display: inline; border: 1px solid #bdf; width: 100%" />';
    uploadWin = uploadWin + ' <input name="add_pic_btn" type="submit" id="add_pic_btn" value="Upload" onmousedown="javascript:add_pic_btn_click_stuff();">';
    uploadWin = uploadWin + '</form>';
    uploadWin = uploadWin + ' <button id="existing_img">Uploaded Images</button> ';
    uploadWin = uploadWin + '<div id="informer" style="color: #696969; border: 1px solid #bdf; padding: 5px"></div> ';
    uploadWin = uploadWin + '<div id="downloaded_imgs"></div> ';
    uploadWin = uploadWin + '<iframe id="upload_target" name="upload_target" src="" style="display: none; width: 100%;border: none; height: 200px"></iframe> ';
    uploadWin = uploadWin + ' </div> ';
    $("body").append(uploadWin);
    $('#file_upload_form').attr("target", "upload_target");
    //Set up a jquery dialog to display upload form
    $("#dialog_uploadImage").dialog({
        //let the plugin take care of opening it
        autoOpen: false,
        resizable: true,
        title: 'Upload Image',
        height: 'auto',
        width: '500px',
        modal: true,
        buttons: {
            'Insert': function () {
                // the upload target will contain the uploaded image html attributes returned by the server code
                var image_attribute = $("#upload_target").contents().find("img").parent().html();
                // only insert if the correct image is present
                if (image_attribute !== null && image_attribute != '') {
                    $(".wysiwyg").cleditor()[0].execCommand("inserthtml", image_attribute, null, null);
                    // empty the upload input    
                    $('#file_upload_input').val('');
                    // clean up the iframe
                    $("#upload_target").contents().find("img").parent().html('');
                }
                $(this).dialog('close');
                $('#upload_target').hide();
                $("#downloaded_imgs").hide();
            },
            Cancel: function () {
                $(this).dialog('close');
                $('#upload_target').hide();
                $("#downloaded_imgs").hide();
            }

        },
        close: function () {
            $('#upload_target').hide();
            $("#downloaded_imgs").hide();
        }
    });

    // reuse the existing image icon
    $.cleditor.buttons.image = {
        name: "image",
        //  css: {backgroundImage: URL,backgroundPosition: "-552px 0px"}, // if we are inserting new image use this option
        stripIndex: 23,
        title: "Attach Image",
        command: "inserthtml",
        buttonClick: imageButtonClick
    };

    // add the button if we are inserting new button
    //  $.cleditor.defaultOptions.controls = $.cleditor.defaultOptions.controls.replace("image ", "image image2 ");

    $(".wysiwyg").cleditor({ width: '100%', height: '100%' }); //Make it whatever you like

    $('#existing_img').bind('click', function () {
        $.post("/home/index_images",
            { image_processing: "saved_images" }, function (data) {
                $("#downloaded_imgs").html(data);
            });
        $("#downloaded_imgs").slideDown(300);
    })

    //==================
    // end of document

});